//瀑布流
var fall=document.getElementById("waterfall_ul");
createLi();
function createLi(){
    for (var i = 0; i < 40; i++) {
            var li = document.createElement('li');
            var img=document.createElement('img');
            var div=document.createElement('div');
            var span=document.createElement('span');
            // li.style.width="210px";
            fall.appendChild(li);  
            li.appendChild(img); 
            li.appendChild(div);
            div.appendChild(span);
            span.innerHTML="我是文字";
            div.setAttribute('class',"cover");
            img.setAttribute("src", "static/1.jpg"); 
        };
}

function change(){
    var lis=fall.getElementsByTagName("li");
    var lis_W=lis[0].offsetWidth;
    // alert(lis_W);
    var imgs=fall.getElementsByTagName('img');
    // alert(imgs.length);
    var windowCW = document.documentElement.offsetWidth;
    var n = Math.floor(windowCW/lis_W); 

    var center = (windowCW - n*lis_W-(n-1)*10)/2;
    var arrH = []; 
    for(var i=0;i<lis.length;i++){
        var j=i%n;
        // alert(arrH);
        if (arrH.length==n) {                   
                var min = findMin(arrH);              
                lis[i].style.left =center + min*(lis_W+10) +"px";  
                lis[i].style.top = arrH[min]+10 + "px";
                arrH[min] += lis[i].offsetHeight + 10; 

                var k=0;
                for(var b=0;b<n;b++){
                    k=Math.max(arrH[k],arrH[b])==arrH[k] ? k : b;
                } 
                fall.style.height= arrH[k]+'px';
                // alert(min);
            }else{
                arrH[j] = imgs[i].offsetHeight;        
                lis[i].style.left =center + lis_W*j+10*j + "px";
                lis[i].style.top = 0;
            }
    }

    function findMin(arr) {
        var m = 0;
        for (var i = 0; i < arr.length; i++) {
            m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;
        }
        return m;
    }
}
window.onload=function(){
    change();
}
window.onresize=function(){
    change();
}
//点击查看图片大图
$(document).ready(function(){
    $(".cover").click(function(){
        // console.log(this.previousSibling.src);
        var cover_img=document.getElementById("cover_img");
        var big_cover=document.getElementById('big_cover');
        cover_img.setAttribute("src", this.previousSibling.src);
        big_cover.style.display="block";
    });
    $("#x").click(function(){
        big_cover.style.display="none";
    });
    $(".cover").hover(function() {
        /* Stuff to do when the mouse enters the element */
        $(this).animate({opacity:1});
    }, function() {
        /* Stuff to do when the mouse leaves the element */
        $(this).animate({opacity:0});
    });
});